<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>充值问卷调查报表</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <link type="text/css" rel="stylesheet" href="js/layui/css/layui.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>  
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/pagetion.js"></script>
    <script type="text/javascript" src="js/layui/layui.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body>
    <div id="surveyReport">
      <h1 class="surveyReportTit">数据概览</h1>
      <div class="surveyReportBox">
            <div class="surveyReportBoxList"  id="q1" style="width: 23%;height: 250px;"></div>
            <div class="surveyReportBoxList"  id="q2" style="width: 23%;height: 250px;"></div>
            <div class="surveyReportBoxList"  id="q3" style="width: 23%;height: 250px;"></div>
            <div class="surveyReportBoxList"  id="q4" style="width: 23%;height: 250px;"></div>
            <div class="surveyReportBoxList"  id="q5" style="width: 23%;height: 250px;"></div>
            <div class="surveyReportBoxList"  id="q6" style="width: 23%;height: 250px;"></div>
            <div class="surveyReportBoxList"  id="q7" style="width: 23%;height: 250px;"></div>
            <div class="surveyReportBoxList"  id="q8" style="width: 23%;height: 250px;"></div>
      </div>
    </div>      
<script>
  var comName=new Vue({
    el:"#surveyReport",
    data:{
    
    },
    mounted() {
      this.getQ1chart()
      this.getQ2chart()
      this.getQ3chart()
      this.getQ4chart()
      this.getQ5chart()
      this.getQ6chart()
      this.getQ7chart()
      this.getQ8chart()
    },
    methods:{
      getQ1chart(){
        var that=this
        var myChart = echarts.init(document.getElementById('q1'));
        var option = {
              title: {
                text: '你喜欢哪个运营商：'
              },
              tooltip: {              
              },
              grid: {
                left: "10%",
                right: "10%",
                width: "80%"
              },
              xAxis: {
                type: 'value',
                containLabel: true,
              },
              yAxis: {
                type: 'category',
                data: ['Globe','Smart','Dito']                
              },
              series: [
                {
                  data: [120, 200, 150],
                  type: 'bar',
                  itemStyle: {
                    color: "#106AFF",
                    borderRadius: [0, 5, 5, 0]
                  },
                  barWidth: 20
                }
              ]
            };
            myChart.setOption(option);
      },
      getQ2chart(){
        var that=this
        var myChart = echarts.init(document.getElementById('q2'));
        var option = {
              title: {
                text: '你平时使用最多的是'
              },
              tooltip: {              
              },
              grid: {
                left: "10%",
                right: "10%",
                width: "80%"
              },
              xAxis: {
                type: 'value',
                containLabel: true,
               
              },
              yAxis: {
                type: 'category',
                data: ['打电话','用流量','发短信']
              },
              series: [
                {
                  data: [120, 200, 150],
                  type: 'bar',
                  itemStyle: {
                    color: "#106AFF",
                    borderRadius: [0, 5, 5, 0]
                  },
                  barWidth: 20
                }
              ]
            };
            myChart.setOption(option);
      },
      getQ3chart(){
        var that=this
        var myChart = echarts.init(document.getElementById('q3'));
        var option = {
              title: {
                text: '你现在国内还是菲律宾'
              },
              tooltip: {              
              },
              grid: {
                left: "10%",
                right: "10%",
                width: "80%"
              },
              xAxis: {
                type: 'value',
                containLabel: true,               
              },
              yAxis: {
                type: 'category',
                data: ['已回国','菲律宾']
              },
              series: [
                {
                  data: [120, 200],
                  type: 'bar',
                  itemStyle: {
                    color: "#106AFF",
                    borderRadius: [0, 5, 5, 0]
                  },
                  barWidth: 20
                }
              ]
            };
            myChart.setOption(option);
      },
      getQ4chart(){
        var that=this
        var myChart = echarts.init(document.getElementById('q4'));
        var option = {
              title: {
                text: '你在菲律宾生活的时长'
              },
              tooltip: {              
              },
              grid: {
                left: "10%",
                right: "10%",
                width: "80%"
              },
              xAxis: {
                type: 'value',
                containLabel: true,
                
              },
              yAxis: {
                type: 'category',
                data: ['<1年','<3年','3年以上']
              },
              series: [
                {
                  data: [120, 200, 150],
                  type: 'bar',
                  itemStyle: {
                    color: "#106AFF",
                    borderRadius: [0, 5, 5, 0]
                  },
                  barWidth: 20
                }
              ]
            };
            myChart.setOption(option);
      },
      getQ5chart(){
        var that=this
        var myChart = echarts.init(document.getElementById('q5'));
        var option = {
              title: {
                text: '你的朋友也在菲律宾吗'
              },
              tooltip: {              
              },
              grid: {
                left: "10%",
                right: "10%",
                width: "80%"
              },
              xAxis: {
                type: 'value',
                containLabel: true,                
              },
              yAxis: {
                type: 'category',
                data: ['在菲律宾','已回国','部分回国']
              },
              series: [
                {
                  data: [120, 200, 150],
                  type: 'bar',
                  itemStyle: {
                    color: "#106AFF",
                    borderRadius: [0, 5, 5, 0]
                  },
                  barWidth: 20
                }
              ]
            };
            myChart.setOption(option);
      },
      getQ6chart(){
        var that=this
        var myChart = echarts.init(document.getElementById('q6'));
        var option = {
              title: {
                text: '你有回国的计划吗'
              },
              tooltip: {              
              },
              grid: {
                left: "10%",
                right: "10%",
                width: "80%"
              },
              xAxis: {
                type: 'value',
                containLabel: true,
                
              },
              yAxis: {
                type: 'category',
                data: ['有机会就回国','留在菲律宾']
              },
              series: [
                {
                  data: [120, 200],
                  type: 'bar',
                  itemStyle: {
                    color: "#106AFF",
                    borderRadius: [0, 5, 5, 0]
                  },
                  barWidth: 20
                }
              ]
            };
            myChart.setOption(option);
      },
      getQ7chart(){
        var that=this
        var myChart = echarts.init(document.getElementById('q7'));
        var option = {
              title: {
                text: '你已接种新冠疫苗吗'
              },
              tooltip: {              
              },
              grid: {
                left: "10%",
                right: "10%",
                width: "80%"
              },
              xAxis: {
                type: 'value',
                containLabel: true,                
              },
              yAxis: {
                type: 'category',
                data: ['已接种','未接种']
              },
              series: [
                {
                  data: [120, 200],
                  type: 'bar',
                  itemStyle: {
                    color: "#106AFF",
                    borderRadius: [0, 5, 5, 0]
                  },
                  barWidth: 20
                }
              ]
            };
            myChart.setOption(option);
      },
      getQ8chart(){
        var that=this
        var myChart = echarts.init(document.getElementById('q8'));
        var option = {
              title: {
                text: '疫情对你的工作生活有影响'
              },
              tooltip: {              
              },
              grid: {
                left: "10%",
                right: "10%",
                width: "80%"
              },
              xAxis: {
                type: 'value',
                containLabel: true,                
              },
              yAxis: {
                type: 'category',
                data: ['无影响','影响不大','足不出户啦']
              },
              series: [
                {
                  data: [120, 200, 150],
                  type: 'bar',
                  itemStyle: {
                    color: "#106AFF",
                    borderRadius: [0, 5, 5, 0]
                  },
                  barWidth: 20
                }
              ]
            };
            myChart.setOption(option);
      }
      
      
    },
  })
  </script> 
  <style scoped>
      #surveyReport{
        width: 100%;
        min-height: 100vh;
        padding: 30px;
        box-sizing: border-box;
        background: #F6F6FB;
      }
      .surveyReportTit{
        font-size: 24px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #000000;
        line-height: 32px;
        margin-bottom: 30px;
        width: 100%;
      }
      .surveyReportBox{
        width: 100%;
        display: flex;
        align-content:stretch;
        justify-content:space-between;
        flex-wrap: wrap;
      }
      .surveyReportBoxList{
        width: 25%;
        margin-bottom: 30px;
      }
  </style>
  </body>
</html>
